<template>
	<view class="submit">
		<block v-if="status === 'form'">
			<view class="info">
				<view class="address" @click="goAddress">
					<view v-if="!address.linkman" class="icon-btn">
						<view class="iconfont icon-add"></view>
						<view class="">添加收货地址</view>
					</view>
					<view v-else class="list-item">
						<view class="padding-r24">
							<view class="area">{{address.province}}{{address.city}}{{address.area}}</view>
							<view class="detail">{{address.address}}</view>
							<view class="flex align-center" style="gap: 16rpx;">
								<view class="name">{{address.linkman}}</view>
								<view class="phone">{{address.phone}}</view>
							</view>
						</view>
						<view class="iconfont icon-chevron-left"></view>
					</view>
				</view>
			
				<view class="info-card">
					<view class="card-label flex align-center justify-between">
						<view class="">费用清单</view>
						<!-- <view class="iconfont icon-help-circle-filled"></view> -->
					</view>
					<view class="info-item">
						<view class="item-label">合计金额</view>
						<view class=""> ¥{{info.cart_total_price | formatPrice($formatPrice, '')}}元</view>
					</view>
					<view class="info-item">
						<view class="item-label">总计金额</view>
						<view class="price">
							<text class="symbol">¥</text>
							<text class="price-num">{{info.pay_total_fee | formatPrice($formatPrice, '')}}元</text>
						 </view>
					</view>
				</view>
			
				<view class="info-card">
					<view class="card-label flex align-center justify-between">
						<view class="">选购产品清单</view>
					</view>
					<view class="product-lists">
						<view class="product-item" v-for="item in info.cart" :key="item.gid">
							<view class="info-list">
								<view class="info-item">产品名称：{{item.product_title}}</view>
								<view class="info-item">数量：{{item.quantity}}台</view>
								<view v-if="item.relation" class="info-item">服务：
									<text v-for="(relation, idx) in item.relation" :key="idx">{{relation.product_title}}{{idx < item.relation.length-1 ? '、' : ''}}</text>
								</view>
								<view class="info-item">金额：{{item.total_price | formatPrice($formatPrice)}}元</view>
							</view>
							<view class="item-img">
								<image :src="item.product_thumb" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="info-card">
					<view class="card-label flex align-center justify-between">
						<view class="">订单备注</view>
					</view>
					
					<view class="form" style="padding-top: 0;">
						<view class="form-item">
							<view class="form-body" style="border-bottom: none;">
								<view class="textarea">
									<textarea type="text" v-model="formData.remark" placeholder="请输入订单备注" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="footer">
					<view class="hint-alert" v-if="formData.is_direct === 1 && info.direct_msg">{{info.direct_msg}}</view>
					
					<button class="confirm-btn flex-1" @click="submit">确定支付</button>
				</view>
			</view>
		</block>
		
		<block v-else>
			<view class="complete">
				<view class="head">
					<view class="check-circle-filled">
						<image v-if="payStatus" src="/static/check-circle-filled.png" mode="widthFix"></image>
						<image v-else src="/static/fail.png" mode="widthFix"></image>
					</view>
					<view v-if="payStatus" class="suc-text">支付成功</view>
					<view v-else class="suc-text">支付失败</view>
				</view>
				<button v-if="!payStatus" class="confirm-btn flex-1" style="margin: 0 84rpx;" @click="payment">继续支付</button>
				<button class="cancel-btn flex-1" style="margin: 0 84rpx;margin-top: 32rpx;" @click="goOrderDetail">查看订单详情</button>
			</view>
		</block>
	</view>
</template>

<script>
	import formatPrice from '@/mixins/formatPrice.js';
	
	export default {
		mixins:[formatPrice],
		data() {
			return {
				formData: {
					remark: ''
				}, // 
				info: {},
				status: 'form', // 	form: 表单; complete: 完成
				
				orderId: '', // 订单id
				unpaid_fee: 0, // 待支付金额
				
				payStatus: true,
				cartIds: '',
				address: {},
				params: {
					arr_cart_gid: '', // string 必需 购物车信息GID组，多个GID逗号分隔 示例值: 4e31f2ff-1635-4397-8bb7-a7daeb2cc131
					address_gid: '', // string  收件人地址GID 必需 示例值: 04a268c0-2924-4ea3-b18b-c1e0a1db2bef
					pay_total_fee: '', // number  必需 订单总金额：商品合计+快递费 示例值: 12064
					remark: '', // string 可选 备注（200个字内）
				}
			};
		},
		onLoad(options) {
			this.cartIds = options.cartIds
			this.params.arr_cart_gid = options.cartIds
			this.userAgentOrderConfirm()
			
			
			uni.$on('changeAddress', (val)=> {
				this.params.address_gid = val.gid
				this.address = val
			})
		},
		onShareAppMessage(){},
		onShareTimeline() {},
		methods: {
			// 前往地址
			goAddress() {
				uni.navigateTo({
					url: '/pages/address/address?type=select'
				})
			},
			// 提交结算单
			userAgentOrderConfirm() {
				this.$api.agentOrderConfirmApi({arr_cart_gid: this.cartIds}).then(res=> {
					this.info = res.data
					this.params.pay_total_fee = this.info.pay_total_fee
					if (res.data.user_address) {
						this.params.address_gid = res.data.user_address.gid
						this.address = res.data.user_address
					}
				}).catch(err=> {
					console.log('err', err);
				})
			},
			submit() {
				const params = {
					arr_cart_gid: this.cartIds,
					address_gid: this.params.address_gid,
					pay_total_fee: this.params.pay_total_fee,
					remark: this.formData.remark // string  必需 备注
				}
				this.$api.agentOrderCreateApi(params).then(res=> {
					this.orderId = res.data.gid
					this.unpaid_fee = res.data.unpaid_fee
					this.payment()
				}).catch(err=> {
					console.log('err', err);
				})
			},
			async payment() {
				const { code } = await uni.login()
				const params = {
					appid: this.$store.state.common.appid, // string 必需 微信小程序appid
					order_gid: this.orderId, // string 订单gid 必需 示例值: 71e3f23b-b20d-4877-b32a-b2fd23a7ddc8
					code: code, // string  必需 wx.login中的code
					order_price: this.unpaid_fee, // number 订单支付金额 必需 示例值: 1332
				}
				this.$api.userAgentOrderPaymentApi(params).then(res=> {
					uni.showLoading({
						title: '支付中···'
					})
					uni.requestPayment({
					    provider: "wxpay",
					    orderInfo: {},
						...res.data,
					    success: (res)=> {
							uni.hideLoading()
							this.payStatus = true
						},
					    fail: (err)=> {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
							this.payStatus = false
						},
						complete: ()=> {
							this.status = 'complete'
						}
					})
				}).catch(err=> {
					console.log('err', err);
				})
			},
			goOrderDetail() {
				uni.redirectTo({
					url: '/pages/agent/procure/order-info/order-info?orderId='+this.orderId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		padding-bottom: calc(300rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(300rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
		.info {
			padding: 24rpx 32rpx;
		}
		
		.address {
			min-height: 214rpx;
			padding: 40rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.02);
			
			.icon-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 28rpx;
				height: 134rpx;
				
				font-size: 34rpx;
				font-weight: 400;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
				
				.icon-add {
					font-size: 30rpx;
				}
			}
			
			.list-item {
				position: relative;
				overflow: hidden;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.02);
				
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.label {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9;
				border-radius: 6rpx;
				padding: 4rpx 16rpx;
				background-color: #E3F9E9;
				
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
				color: #2BA471;
			}
			
			.area {
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: 400;
				line-height: 18.2px;
				text-align: left;
				color: rgba(0, 0, 0, 0.7);
				padding-bottom: 14rpx;
			}
			
			.detail {
				font-size: 34rpx;
				font-weight: 400;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
				padding-bottom: 14rpx;
			}
			
			.name {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				text-align: left;
				color: #000000;
			}
			
			.phone {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				text-align: left;
				color: #000000;
			}
			
			.icon-edit-1 {
				color: #000000;
				font-size: 32rpx;
				position: relative;
				z-index: 9;
				
				&::after {
					position: absolute;
					content: '';
					top: 14rpx;
					left: 4rpx;
					z-index: -1;
					width: 70%;
					height: 8rpx;
					transform: rotate(-45deg);
					background-color: #A5A4B4;
				}
			}
		}
		
		.prod-card {
			padding: 0 32rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.02);
			
			.name {
				font-size: 34rpx;
				font-weight: 600;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
			}
			
			.detail {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				text-align: left;
				color: #999999;
				padding-top: 6rpx;
			}
			
			.prod-img {
				width: 214rpx;
				height: 214rpx;
				margin-left: 42rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.info-card {
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.02);
			
			.card-label {
				font-size: 28rpx;
				font-weight: 600;
				line-height: 38rpx;
				text-align: left;
				color: #000000;
				padding-bottom: 12rpx;
			}
			
			.icon-help-circle-filled {
				font-weight: 400;
			}
			
			.info-item {
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px dashed #EAEAEA;
				
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
				color: #000000;
				
				.item-label {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 38rpx;
					text-align: left;
					color: rgba(0, 0, 0, 0.4);
				}
			}
			
			.price {
				display: flex;
				align-items: flex-end;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 44rpx;
				text-align: left;
				color: #FF0000;
				
				.symbol {
					font-size: 24rpx;
					font-weight: 600;
					line-height: 32rpx;
					text-align: left;
				}
			}
			
			.product-lists {
				
				.product-item {
					display: flex;
					align-items: center;
					padding-top: 36rpx;
					padding-bottom: 36rpx;
					justify-content: space-between;
					border-bottom: 1px solid #F1F1F1;
				}
				
				.info-list {
					padding: 0;
					
					.info-item {
						height: auto;
						color: #999999;
						font-size: 26rpx;
						text-align: left;
						font-weight: 400;
						line-height: 36rpx;
						
						display: flex;
						border-bottom: none;
					}
				}
				
				.item-img {
					width: 154rpx;
					height: 154rpx;
					flex-shrink: 0;
					overflow: hidden;
					margin-left: 24rpx;
					border-radius: 12rpx;
					background-color: #F6F6F6;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.form {
			padding-top: 32rpx;
		
			.form-item {
				padding-bottom: 32rpx;
		
				&:last-child {
					padding-bottom: 0;
				}
			}
		
			.form-label {
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				line-height: 44rpx;
				padding-bottom: 8rpx;
				color: rgba(0, 0, 0, 0.9);
			}
		
			.form-body {
				padding-bottom: 12rpx;
				border-bottom: 1px solid #E7E7E7;
			}
		
			.input {
				width: 100%;
				height: 72rpx;
				display: flex;
				align-items: center;
		
				input {
					flex: 1;
					height: 100%;
				}
			}
		
			.hint {
				font-size: 24rpx;
				font-weight: 400;
				text-align: left;
				line-height: 40rpx;
				padding-bottom: 10rpx;
				color: rgba(0, 0, 0, 0.4);
			}
		
			.right-btn {
				position: relative;
				padding: 0 32rpx;
				height: 48rpx;
				color: var(--primary-color);
				font-size: 32rpx;
				font-weight: 400;
				line-height: 48rpx;
				text-align: center;
				line-height: 48rpx;
		
				&:before {
					position: absolute;
					content: '';
					top: 5%;
					left: 0;
					bottom: 0;
					width: 1px;
					height: 90%;
					background-color: #E7E7E7;
				}
			}
		
			.textarea {
				height: 168rpx;
				padding: 14rpx 16rpx;
				border-radius: 12rpx;
				box-sizing: border-box;
				border: 1px solid #E7E7E7;
				
				textarea {
					width: 100%;
					height: 100%;
					font-size: 32rpx;
					font-weight: 400;
					line-height: 48rpx;
					text-align: left;
				}
			}
		}
		
		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 22rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			
			.hint-alert {
				padding: 4rpx 16rpx;
				margin-bottom: 20rpx;
				border-radius: 6rpx;
				background-color: #FFF1E9;
				
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
				color: #E37318;
			}
		}
	}

	.complete {
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		.head {
			position: relative;
			height: 40vh;
			overflow: hidden;
			margin-bottom: 72rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			
			&::after {
				position: absolute;
				content: '';
				top: 0;
				left: 50%;
				right: 0;
				z-index: -1;
				width: 160%;
				height: 100%;
				background-color: #E6E6E6;
				border-radius: 0 0 50% 50%;
				transform: translateX(-50%);
			}
			
			.check-circle-filled {
				width: 140rpx;
				height: 140rpx;
				margin-bottom: 24rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.suc-text {
				font-size: 34rpx;
				font-weight: 600;
				line-height: 46rpx;
				text-align: left;
			}
		}
	}
</style>
